<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title></title>
        <script type='text/javascript'>
            
            var CTP_WEB_FULLPATH = '../../';
        </script>
        <link href='../../css/jquery/ui.core.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/jquery/ui.theme.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/skins/standard/ctp-common.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/validator.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/borderlayout.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/panel.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/gridlayout.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/toolbar.css' rel='stylesheet' type='text/css'/>
        <link href='../../css/menus.css' rel='stylesheet' type='text/css'/>
        <link href="../../css/colormenu.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/groupbox.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/button.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/messagebox.css" rel="stylesheet" type="text/css"/>
        <script type='text/javascript' src='../../js/jquery/jquery.js'>
        </script>
        <script type='text/javascript' src='../../js/jquery/jquery-migrate.js'>
        </script>
        <script type='text/javascript' src='../../js/jqueryui/jquery-ui.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/public/jsextend.js'>
        </script>
		
        <script type='text/javascript' src='../../js/ctp/public/ctp.core.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.base.js'></script>
		<script type='text/javascript' src='../../js/ctp/public/ctp.ui.component.js'></script>
		
        <script type='text/javascript' src='../../js/ctp/validator/ctp.validator-rules.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/validator/ctp.validator.js'>
        </script>
        <script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
        </script>
        <script type='text/javascript' src='../../js/ctp/borderlayout/ctp.ui.borderlayout.js'>
        </script>
        <script type="text/javascript" src="../../js/ctp/colormenu/ctp.ui.colormenu.js">
        </script>
        <script type='text/javascript' src='../../js/ctp/borderlayout/jquery.layout.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/panel/ctp.ui.panel.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/public/jquery.bgiframe.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/gridlayout/ctp.ui.gridlayout.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/toolbar/ctp.ui.toolbar.js'>
        </script>
        <script type='text/javascript' src='../../js/ctp/menus/ctp.ui.menus.js'>
        </script>
        <script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/messagebox/ctp.ui.messagebox.js">
        </script>
        <script type='text/javascript' kind='variant'>
            var toolbar2;
            var cm, buttonsLayout, buttonsGroupbox, panel2, showLayout;
        </script>
        <script type='text/javascript' kind='event'>
        </script>
        <script type='text/javascript' kind='ui'>
            
            $(document).ready(function(){
                var button1 = new ctp.ui.button({
                    id: 'button1',
                    text: '获取颜色',
                    width: '100%',
                    onClick: function(){
                       ctpMSB.alert({
                            title: '信息提示',
                            message: '选取颜色为：' + cm.getColor()
                        });
                    }
                });
            	  var button2 = new ctp.ui.button({
                    id: 'button2',
                    text: '销毁对象',
                    width: '100%',
                    onClick: function(){
                    	 cm.remove();
                    }
                });
                cm = new ctp.ui.colormenu({
                    id: 'test',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: '选取颜色为：' + cm.getColor()
                        });
                    }
                });
                toolbar2 = new ctp.ui.toolbar({
                    id: 'toolbar2',
                    leftItems: [{
                        type: 'menu',
                        id: 'menus3',
                        text: '菜单',
                        icon: 'menu',
                        object: cm
                    }]
                });
                
                showLayout = new ctp.ui.gridlayout({
                    id: 'showLayout',
                    width: '100%',
                    height: '160px',
                    cols: 1,
                    colSpace: 2,
                    items: [[{
                        element: toolbar2
                    }]]
                });
                
                buttonsLayout = new ctp.ui.gridlayout({
                    id: 'buttonsLayout',
                    width: '98%',
                    cols: 3,
                    align: 'center',
                    colSpace: 30,
                    items: [[{
                        element: button1
                    },{
                    		element: button2
                    }]]
                
                });
                var showGroupbox = new ctp.ui.groupbox({
                    id: 'showGroupbox',
                    items: [showLayout],
                    title: '效果展示区'
                });
                buttonsGroupbox = new ctp.ui.groupbox({
                    id: 'buttonsGroupbox',
                    items: [buttonsLayout],
                    width: '100%',
                    title: '功能测试区'
                });
                panel2 = new ctp.ui.panel({
                    id: 'panel2',
                    title: 'colormenu组件',
                    width: '600px',
                    height: '420px',
                    align: 'center',
                    items: [showGroupbox, buttonsGroupbox],
                    renderTo: 'body'
                });
            });
        </script>
    </head>
    <BODY>
        <b>ctp.ui.colormenu实例</b>
        <hr/>
        <br/>
    </BODY>
</html>
